import React, { useCallback } from "react";
import { useDropzone } from "react-dropzone";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import * as z from "zod";

interface FileUploaderFormProps {}

const FileUploaderForm: React.FC<FileUploaderFormProps> = () => {
  const formSchema = z.object({
    files: z.any().array(),
  });

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      files: [],
    },
  });

  const onDrop = useCallback(
    (acceptedFiles: File[]) => {
      form.setValue("files", acceptedFiles);
    },
    [form]
  );

  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    console.log(values.files);
    // 在这里处理文件上传逻辑
  };

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
        <FormField
          control={form.control}
          name="files"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Upload Files</FormLabel>
              <FormControl>
                <div {...getRootProps()}>
                  <input {...getInputProps()} />
                  <div className="border-2 border-dashed rounded-lg p-8 flex flex-col items-center justify-center text-center">
                    {isDragActive ? (
                      <p>Drop the files here ...</p>
                    ) : (
                      <>
                        <p>
                          Drag 'n' drop some files here, or click to select
                          files
                        </p>
                        <Button
                          variant="outline"
                          className="mt-4"
                          onClick={() => {}}
                        >
                          Select files
                        </Button>
                      </>
                    )}
                  </div>
                </div>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );
};

export default FileUploaderForm;
